<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="isShow = !isShow">切换</button>
        <p v-show="isShow">我是v-show控制</p>
        <p v-if="isShow">我是v-if控制</p>

        <input type="text" placeholder="请输入年龄" v-model.number="age">
        <!-- 双分支 -->
        <div v-if="age >= 18">去网吧偷耳机</div>
        <div v-else>去公园捡垃圾</div>

        <h3>以下演示多分支</h3>
        <input type="text" placeholder="请输入班长有多少钱" v-model.number="money">
        <!-- 多分支 -->
        <!-- 
            如果班长的钱是3000以上，就请我去按背
            如果班长的钱是2000以上，但不足3000，就请我去洗脚
            如果班长的钱是1000以上，但不足2000，就请我去吃饭
            如果班长的钱是500以上，但不足1000，就请我网吧上网
            如果班长的钱是500以下，暴打班长一顿，叫他回去网吧再偷耳机
         -->
        <div v-if="money >= 3000">请我去按背</div>
        <div v-else-if="money >= 2000">请我去洗脚</div>
        <div v-else-if="money >= 1000">请我去吃饭</div>
        <div v-else-if="money >= 500">请我去网吧上网</div>
        <div v-else>打班长一顿，叫他再去网吧偷点耳机</div>

    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true,
                age: 0,
                money: 5000
            }
        })
    </script>
</body>

</html>